<template>
  <div class="transition-demo flex justify-center items-center w-2/6 h-100 bg-pink-200" transition-style="in:wipe:right">
    <h1>transition.css</h1>
    <p>Drop-in CSS transitions @ <a href="http://transition.style" target="_blank">transition.style</a></p>
  </div>

  <el-button type="primary" @click="handleClick">Click me</el-button>
</template>

<script setup lang="ts">
const handleClick = () => {
  const element = document.querySelector('.transition-demo')
  // 所有的 transition-style 过渡动画都存放在 transition.scss 文件中，这里只使用了 wipe 动画
  const transitionStyle = element.getAttribute('transition-style');
  // 如果有 transition-style 属性，则移除，否则添加
  if (transitionStyle) {
    let result = transitionStyle.includes('out') ? transitionStyle.replace('out:wipe:left', 'in:wipe:right') : transitionStyle.replace('in:wipe:right', 'out:wipe:left')
    console.log("result: ", result)
    element.setAttribute("transition-style", result)

    // element.removeAttribute('transition-style');
  } else {
    document.querySelector('.transition-demo').setAttribute('transition-style', 'in:wipe:left');
  }
}
</script>

<style scoped lang="scss">

</style>